<template>
  <div class="ring" :style="style"></div>
</template>

<script lang="ts" setup>
import { ref } from "vue"

const props = defineProps({
  radius: {
    type: Number,
    required: true
  },
  color: {
    type: String,
    required: true
  }
})

const style = ref({
  width: props.radius + "px",
  height: props.radius + "px",
  border: `${props.radius * 0.2}px solid ${props.color}`
})
</script>

<style scoped lang="scss">
.ring {
  border-radius: 50%;
}
</style>
